<template>
    <view :class="ggclass" class="data-box" :style="{ padding, background: backs, backgroundSize, height, borderRadius: radius, justifyContent: jc }">
        <slot></slot>
    </view>
</template>

<script>
export default {
    name: "qg-box",
    props: {
        padding: {
            type: String,
            default: "32px",
        },
        back: {
            type: String,
            default: "#fff",
        },
        backgroundSize: {
            type: String,
            default: "100% 100%",
        },
        ggclass: {
            type: String,
            default: "",
        },
        height: {
            type: String,
            default: "",
        },
        radius: {
            type: String,
            default: "",
        },
        jc: {
            type: String,
            default: "",
        },
    },
    computed: {
        backs() {
            if (this.back.includes("data") || this.back.includes("http")) {
                return `url(${this.back})`;
            } else {
                return this.back;
            }
        },
    },
};
</script>

<style scoped>
.data-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 32px;
    min-height: 70px;
    position: relative;
    overflow: hidden;
}
</style>
